<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" :key="index" v-for="(item, index) in banners">
        <a :href="item.link">
          <img :src="item.image" alt="" @load="imgLoad" />
        </a>
      </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";
import "swiper/dist/js/swiper.min";
export default {
  name: "HomeSwiper",
  props: {
    banners: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      isLoad: true,
    };
  },
  // 生命周期函数
  mounted() {
    // 设置延时 组件载入后过一会创建轮播图实例
    setTimeout(() => {
      new Swiper(".swiper-container", {
        pagination: {
          el: ".swiper-pagination",
          bulletActiveClass: "my-bullet-active",
        },
        spaceBetween: 5,
        centeredSlides: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        loop: true, //循环
      });
    }, 100);
  },

  methods: {
    // 监听swiper图片是否加载完成
    imgLoad() {
      // 只发送一次事件
      if (this.isLoad) {
        this.$emit("swiperImgLoad");
        this.isLoad = false;
      }
    },
  },
};
</script>

<style>
.swiper-slide img {
  width: 100%;
}
.my-bullet-active {
  background: #ff6600;
  opacity: 1;
}
</style>
